<template>
	<view class="eva">
		<view class="message_top">
			<view class="message_top_title" :style="{top:computedTop}">店铺评价</view>
			<view class="message_top_back" :style="{top:computedTop}" @click="Back">
				<image src="../../static/search/back.png" class="bfbimages"></image>
			</view>
		</view>

		<view class="eva_top">
			<view class="flex">
				<image :src="Dta.merchant_avatar" class="bfbimages"></image>
			</view>
			<view>
				<view>{{Dta.merchant_name}}</view>
				<view>
					<view>
						<view class="flex" style="width: 22rpx;height: 24rpx;margin-right: 15rpx;margin-left: 10rpx;">
							<image :src="Dta.icon" class="bfbimages"></image>
						</view>
						<text style="display: inline-block;margin-right: 10rpx;">{{Dta.cate_name}}</text>
					</view>
					<view style="margin-left: 20rpx;">
						<view class="flex" style="width: 22rpx;height: 24rpx;margin-right: 15rpx;">
							<image src="../../static/cj.png" class="bfbimages"></image>
						</view>
						<text style="display: inline-block;margin-right: 10rpx;">商家积分：{{Dta.credit_nums}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="eva_body">
			<view>服务评分</view>
			<view>如果您对服务满意请给五星好评哦~</view>
			<view>
				<text>准时评分</text>
				<view style="margin-left: 15rpx;">
					<u-rate :count="count" v-model="credit_nums" :size='28'></u-rate>
				</view>
			</view>
		</view>

		<view class="eva_bto">
			<view>评价内容</view>
			<view><u--textarea v-model="content" placeholder="请输入对产品的评价" border="none"></u--textarea></view>
			<view>
				<view class="up" @click="Upimages">
					<view class="flex">
						<image src="../../static/xj.png" class="bfbimages"></image>
					</view>
					<view>上传</view>
				</view>
				
				<view class="up flex" style="height: 180rpx;padding-top: 0;position: relative;" v-for="(item,index) in images" :key="index">
					<image :src="item" class="bfbimages"></image>
					<view class="Out flex" style="width: 40rpx;height: 40rpx;" @click="Outc(index)">
						<image src="../../static/cha.png" class="bfbimages"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="eva_btn" @click="LinkSUpj">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: null,
				count: 5,
				credit_nums: 0,
				content: '',
				Dta:'',
				images:[]
			}
		},
		computed: {
			computedTop() {
				if (this.menuButtonInfo) {
					return `${this.menuButtonInfo.height * 2 - 6}px`;
				}
				return '0px';
			},
		},
		onLoad(options) {
			const info = uni.getMenuButtonBoundingClientRect();
			this.menuButtonInfo = info;
			
			this.Dta=JSON.parse(options.data)
			console.log(this.Dta,'接收的数据');
		},
		methods: {
			Outc(index){
				this.images.splice(index,1)
			},
			Upimages(){
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: this.$uts + '/api/common/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								token: uni.getStorageSync('token'),
								type: 2
							},
							header: {
								'token': uni.getStorageSync('token'),
								'server': 1,
							},
							success: (res) => {
								let Ima = JSON.parse(res.data)
								console.log(Ima.data.url, 'Ima-Ima-Ima');
								this.images.push(Ima.data.url)
							}
						});
					}
				});
			},
			LinkSUpj(){
				let data={
					activity_record_id:this.Dta.id,
					content:this.content,
					credit_nums:this.credit_nums,
					images:this.images
				}
				this.$request('/api/user/toEvaluate',data).then((res)=>{
					console.log(res,'提交评价');
					if(res.code==1){
						uni.navigateTo({
							url:'/pages/success/successPJ'
						})
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1500
						});
					}
					
				})
				
			},
			Back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.eva {
		width: 100vw;
		min-height: 100vh;
		float: left;
		background-color: #F6F8FB;

		.message_top {
			width: 100%;
			height: 200rpx;
			position: relative;

			.message_top_title {
				width: 100%;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
				position: absolute;
				left: 0;
				z-index: 2;
			}

			.message_top_back {
				width: 44rpx;
				height: 44rpx;
				position: absolute;
				left: 30rpx;
				z-index: 9;
			}
		}

		.eva_top {
			width: 690rpx;
			height: 200rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			margin: 0 auto 0;
		}

		.eva_top>view:nth-child(1) {
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-left: 30rpx;
		}

		.eva_top>view:nth-child(2) {
			width: auto;
			height: 140rpx;
			margin-left: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
		}

		.eva_top>view:nth-child(2)>view:nth-child(1) {
			width: 100%;
			height: 50%;
			display: flex;
			align-items: center;
		}

		.eva_top>view:nth-child(2)>view:nth-child(2) {
			width: 100%;
			height: 50%;
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FF6421;
		}

		.eva_top>view:nth-child(2)>view:nth-child(2)>view {
			max-width: 270rpx;
			min-width: 100rpx;
			height: 44rpx;
			background: #FFEBE2;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.eva_body {
			width: 690rpx;
			height: 286rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin: 20rpx auto 0;
		}

		.eva_body>view:nth-child(1),
		.eva_bto>view:nth-child(1) {
			width: 630rpx;
			height: 92rpx;
			border-bottom: 2rpx solid #EEEEEE;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			margin: 0 auto;
			line-height: 92rpx;
		}

		.eva_body>view:nth-child(2) {
			width: 630rpx;
			height: auto;
			margin: 30rpx auto 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
		}

		.eva_body>view:nth-child(3) {
			width: 630rpx;
			height: 56rpx;
			display: flex;
			align-items: center;
			margin: 30rpx auto 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
		}

		.eva_bto {
			width: 690rpx;
			height: 600rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin: 20rpx auto 0;
		}

		.eva_bto>view:nth-child(2) {
			width: 630rpx;
			height: 220rpx;
			margin: 30rpx auto 0;

		}
		.eva_bto>view:nth-child(3){
			width: 630rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin: 0 auto;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}
		.up{
			width: 180rpx;
			height: 137rpx;
			background: #F2F2F2;
			margin-right: 20rpx;
			padding-top: 43rpx;
			margin-bottom: 20rpx;
		}
		.up>view:nth-child(1){
			width: 48rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			margin: 0 auto;
		}
		.up>view:nth-child(2){
			width: 100%;
			text-align: center;
			margin: 20rpx auto 0;
		}
		
		.eva_btn{
			width: 710rpx;
			height: 100rpx;
			background: linear-gradient( 270deg, #FE4624 0%, #FF8143 100%);
			border-radius: 50rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 100rpx;
			position: fixed;
			left: 50%;
			bottom: 20rpx;
			transform: translate(-50%,0);
			z-index: 9;
			
		}

	}
	
	.Out{
		border-radius: 50%;
		overflow: hidden;
		background-color: #666666;
		position: absolute;
		right: -20rpx;
		top: -37rpx;
		text-align: center;
		line-height: 40rpx;
		z-index: 9;
		overflow: hidden;
		
	}
</style>